<template>
  <div class="home">
    <!-- 面试题：
    页面出现弹框的时候，弹框后看见了弹框底层的页面内容，怎么解决
    
    解决方案：
    1.给首页内容添加一个div v-if的值通过路径的值来决定是否展示，为了避免即可消失，外加
    transition name="van-fade"  解决立刻消失的问题
     -->
    <transition name="van-fade">
      <div v-if="$route.path === '/home'">
        <!-- 首页搜索栏 -->
        <van-search
          v-model="searchval"
          shape="round"
          background="#fff"
          placeholder="请输入搜索关键词"
          disabled
          @click="searchClick"
        />
        <!-- 首页轮播图 -->
        <van-swipe class="my-swipe" :autoplay="3000" indicator-color="#1989fa">
          <van-swipe-item v-for="item in bannerArr" :key="item.id">
            <img :src="item.image_url" alt="" width="100%" />
          </van-swipe-item>
        </van-swipe>

        <!-- 首页频道 -->
        <Grid :channelArr="channelArr"></Grid>
        <!-- 首页专题精选 -->
        <Topic :topicListArr="topicListArr"></Topic>
      </div>
    </transition>
    <!-- 黑色遮罩层盒子 -->
    <transition name="van-fade">
      <div class="popup-shadow" v-show="isshowpopup"></div>
    </transition>
    <!-- van-fade ui框架淡入淡出效果，完美解决了点击取消盒子瞬间消失的效果 -->

    <!-- 展示搜索弹出窗口 -->
    <transition name="van-slide-right">
      <!-- van-slide-right封装好的样式与下面style文件里的slide样式一样 -->
      <router-view />
    </transition>
  </div>
</template>

<script>
import { pageAPI } from "../../request/api";
import { mapState, mapMutations } from "vuex";
import Grid from "../components/home/Grid.vue";
import Topic from "../components/home/Topic.vue";

export default {
  name: "Home",
  components: { Grid, Topic },
  data() {
    return {
      // 搜索栏的value
      searchval: "",
      // 轮播图数组
      bannerArr: [],
      // 首页频道数据
      channelArr: [],
      // 专题精选数据
      topicListArr: [],
    };
  },
  computed: {
    ...mapState({
      isshowpopup: (state) => state.showshadow.isshowpopup,
    }),
  },
  created() {
    pageAPI()
      .then((res) => {
        console.log(res.data);
        this.bannerArr = res.data.banner;
        this.channelArr = res.data.channel;
        this.topicListArr = res.data.topicList;
      })
      .catch((err) => {
        console.log(err);
      });
  },
  methods: {
    ...mapMutations({
      chanisshowpopup: "showshadow/chanisshowpopup",
    }),
    searchClick() {
      this.$router.push("/home/searchpopup");
      this.chanisshowpopup(true);
    },
  },
  // 路由监听,只能监听父子级路由之间的切换
  watch: {
    $route(to, from) {
      // 当来到/home地址
      if (to.path === "/home") {
        this.chanisshowpopup(false);
      }
    },
  },
};
</script>

<style lang="less" scoped>
//
// // 进场初始状态，离开的结束状态
// .slide-enter,
// .slide-leave-to {
//   right: -100%;
// }

// // 过度事件的设置
// .slide-enter-active,
// .slide-leave-active {
//   transition: all 0.5s;
// }

// // 进场的结束状态，以及离开的初始状态
// .slide-enter-to,
// .slide-leave {
//   right: 0;
// }
.home {
  padding-bottom: 50px;
}
.popup-shadow {
  width: 100%;
  height: 100%;
  position: absolute;
  left: 0;
  top: 0;
  background-color: rgba(0, 0, 0, 0.5);
}
</style>
